<template>
    <div class="form-group">
        <label for="useragent">浏览器样式</label>
        <select v-model="userAgent" class="browser-select" @change="handleUserAgentChange">
            <option
                value="Mozilla/5.0 (Linux; Android 10; SM-G981B) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.162 Mobile Safari/537.36">
                手机
            </option>
            <option
                value="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.77 Safari/537.36">
                电脑
            </option>
        </select>
    </div>
</template>

<script setup>
import { ref } from 'vue'

// Emits
const emit = defineEmits(['user-agent-change'])

// 响应式数据
const userAgent = ref("Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.77 Safari/537.36")

// 方法
function handleUserAgentChange() {
    emit('user-agent-change', userAgent.value)
}

// 暴露数据
defineExpose({
    userAgent
})
</script>

<style scoped>
.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

.browser-select {
    width: 100%;
    padding: 6px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    font-size: 14px;
}
</style>